﻿@using StackExchange.Profiling
@{
    var profiler = MiniProfiler.Current;

    using (profiler.Step("Some complex thinking"))
    {
        System.Threading.Thread.Sleep(25);
    }
}

<h2>Behold the MiniProfiler in the top left corner and tremble!</h2>
<h3>Now tremble some more - it works over N-tier!</h3>
<h3>Click the links below to see it profile ajax requests:</h3>

<div style="width:50%; float:left;">
    <a id="fetch-hits" href="javascript:void(0);">Fetch Route Hits</a>
    <table id="fetch-results" style="margin-top:20px;">
        <thead>
            <tr>
                <th>Route Name</th>
                <th>Hits</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>    
</div>

<div style="width:50%; float:right;">
    <a class="massive-nesting" href="javascript:void(0);">Massive Nesting</a>
    <a class="massive-nesting" href="javascript:void(0);" style="padding-left:20px">Massive Nesting 2</a>
    <a class="duplicate" href="javascript:void(0);">Duplicated Queries (N+1)</a>

    <script type="text/javascript">
        $(function() {
            $('#fetch-hits').click(function() {
                var table = $('#fetch-results');

                if (table.data('working')) return; // one request at a time, please

                table
                    .data('working', true)
                    .fadeTo('fast', 0.3) // dim while fetching
            
                var tbody = table.find('tbody');
            
                $.ajax({
                    type: 'GET',
                    url: '@Url.Action("FetchRouteHits")',
                    dataType: 'json',
                    success: function(data) {
                        tbody.empty();
                        for (var i = 0; i < data.length; i++) {
                            tbody.append('<tr><td>' + data[i].RouteName + '</td><td>' + data[i].HitCount + '</td></tr>');
                        }
                    },
                    error: function() {
                        alert('oops!')
                    },
                    complete: function() {
                        table
                            .fadeTo('fast', 1)
                            .data('working', false);
                    }
                });
            });

            $('.massive-nesting').click(function() {
                var link = $(this);
                $.get('@Url.Action("MassiveNesting")' + (link.text().indexOf('2') < 0 ? '' : '2'), function(data) {
                    link.parent().append('<p>' + data + '</p>');
                });
            });
            $('.duplicate').click(function () {
                var link = $(this);
                $.get('@Url.Action("Duplicated")', function (data) {
                    link.parent().append('<p>' + data + '</p>');
                });
            });
        });
    </script>
</div>
@*
<div style="clear:both; margin-top: 30px">
    What you need for profiling
</div>*@

<div style="margin:900px 0 300px 0;">
    Some content way down the page - notice how the profiler button is fixed in the upper left corner.
</div>

